<template>
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index' }">后台首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>

        <el-main>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all">
                    <div class="btn">
                        <el-button type="success" size="small">发布商品</el-button>
                        <el-button type="danger" size="small">批量删除</el-button>
                        <el-button size="small">上架</el-button>
                        <el-button size="small">下架</el-button>
                        <div class="d-flex">
                            <el-input v-model="input" placeholder="要搜索的商品名称" style="width: 150px;height:25px"></el-input>
                            <el-button type="info" size="small">搜索</el-button>
                            <el-button size="small">高级搜索</el-button>
                        </div>
                    </div>

                    <div class="tab">
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange" border>
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="data" label="商品" width="250">
                                <template v-slot="scope">
                                    <img :src="scope.row.cover" alt="">
                                    {{ scope.row.category.name }}
                                    {{ scope.row.title }}
                                    {{ scope.row.create_time }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="实际销量" width="50">
                                <template v-slot="scope">
                                    {{ scope.row.min_stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="商品状态" width="80">
                            </el-table-column>
                            <el-table-column prop="address" label="审核状态" width="150">
                            </el-table-column>
                            <el-table-column prop="address" label="总库存" width="120">
                                <template v-slot="scope">
                                    {{ scope.row.stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="价格(元)" width="110">
                                <template v-slot="scope">
                                    {{ scope.row.min_price }}
                                </template>

                            </el-table-column>
                            <el-table-column prop="address" label="操作" width="440">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>


                <el-tab-pane label="审核中" name="checking">
                    <div class="btn">
                        <el-button type="success" size="small">发布商品</el-button>
                        <el-button type="danger" size="small">批量删除</el-button>

                        <div class="d-flex">
                            <el-input v-model="input" placeholder="要搜索的商品名称" style="width: 150px;height:25px"></el-input>
                            <el-button type="info" size="small">搜索</el-button>
                            <el-button size="small">高级搜索</el-button>
                        </div>
                    </div>
                    <div class="tab">
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange" border>
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="data" label="商品" width="250">
                                <template v-slot="scope">
                                    <img :src="scope.row.cover" alt="">
                                    {{ scope.row.category.name }}
                                    {{ scope.row.title }}
                                    {{ scope.row.create_time }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="实际销量" width="50">
                                <template v-slot="scope">
                                    {{ scope.row.min_stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="商品状态" width="80">
                            </el-table-column>
                            <el-table-column prop="address" label="审核状态" width="150">
                            </el-table-column>
                            <el-table-column prop="address" label="总库存" width="120">
                                <template v-slot="scope">
                                    {{ scope.row.stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="价格(元)" width="110">
                                <template v-slot="scope">
                                    {{ scope.row.min_price }}
                                </template>

                            </el-table-column>
                            <el-table-column prop="address" label="操作" width="440">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>


                <el-tab-pane label="出售中" name="saling">
                    <div class="btn">
                        <el-button type="success" size="small">发布商品</el-button>
                        <el-button type="danger" size="small">批量删除</el-button>
                        <el-button size="small">下架</el-button>

                        <div class="d-flex">
                            <el-input v-model="input" placeholder="要搜索的商品名称" style="width: 150px;height:25px"></el-input>
                            <el-button type="info" size="small">搜索</el-button>
                            <el-button size="small">高级搜索</el-button>
                        </div>
                    </div>
                    <div class="tab">
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange" border>
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="data" label="商品" width="250">
                                <template v-slot="scope">
                                    <img :src="scope.row.cover" alt="">
                                    {{ scope.row.category.name }}
                                    {{ scope.row.title }}
                                    {{ scope.row.create_time }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="实际销量" width="50">
                                <template v-slot="scope">
                                    {{ scope.row.min_stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="商品状态" width="80">
                            </el-table-column>
                            <el-table-column prop="address" label="审核状态" width="150">
                            </el-table-column>
                            <el-table-column prop="address" label="总库存" width="120">
                                <template v-slot="scope">
                                    {{ scope.row.stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="价格(元)" width="110">
                                <template v-slot="scope">
                                    {{ scope.row.min_price }}
                                </template>

                            </el-table-column>
                            <el-table-column prop="address" label="操作" width="440">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>


                <el-tab-pane label="已下架" name="off">
                    <div class="btn">
                        <el-button type="success" size="small">发布商品</el-button>
                        <el-button type="danger" size="small">批量删除</el-button>
                        <el-button size="small">上架</el-button>

                        <div class="d-flex">
                            <el-input v-model="input" placeholder="要搜索的商品名称" style="width: 150px;height:25px"></el-input>
                            <el-button type="info" size="small">搜索</el-button>
                            <el-button size="small">高级搜索</el-button>
                        </div>
                    </div>
                    <div class="tab">
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange" border>
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="data" label="商品" width="250">
                                <template v-slot="scope">
                                    <img :src="scope.row.cover" alt="">
                                    {{ scope.row.category.name }}
                                    {{ scope.row.title }}
                                    {{ scope.row.create_time }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="实际销量" width="50">
                                <template v-slot="scope">
                                    {{ scope.row.min_stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="商品状态" width="80">
                            </el-table-column>
                            <el-table-column prop="address" label="审核状态" width="150">
                            </el-table-column>
                            <el-table-column prop="address" label="总库存" width="120">
                                <template v-slot="scope">
                                    {{ scope.row.stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="价格(元)" width="110">
                                <template v-slot="scope">
                                    {{ scope.row.min_price }}
                                </template>

                            </el-table-column>
                            <el-table-column prop="address" label="操作" width="440">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>


                <el-tab-pane label="库存预警" name="min_stock">
                    <div class="btn">
                        <el-button type="success" size="small">发布商品</el-button>
                        <el-button type="danger" size="small">批量删除</el-button>

                        <div class="d-flex">
                            <el-input v-model="input" placeholder="要搜索的商品名称" style="width: 150px;height:25px"></el-input>
                            <el-button type="info" size="small">搜索</el-button>
                            <el-button size="small">高级搜索</el-button>
                        </div>
                    </div>
                    <div class="tab">
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange" border>
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="data" label="商品" width="250">
                                <template v-slot="scope">
                                    <img :src="scope.row.cover" alt="">
                                    {{ scope.row.category.name }}
                                    {{ scope.row.title }}
                                    {{ scope.row.create_time }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="实际销量" width="50">
                                <template v-slot="scope">
                                    {{ scope.row.min_stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="商品状态" width="80">
                            </el-table-column>
                            <el-table-column prop="address" label="审核状态" width="150">
                            </el-table-column>
                            <el-table-column prop="address" label="总库存" width="120">
                                <template v-slot="scope">
                                    {{ scope.row.stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="价格(元)" width="110">
                                <template v-slot="scope">
                                    {{ scope.row.min_price }}
                                </template>

                            </el-table-column>
                            <el-table-column prop="address" label="操作" width="440">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>


                <el-tab-pane label="回收站" name="delete">
                    <div class="btn">
                        <el-button type="success" size="small">发布商品</el-button>
                        <el-button type="warning" size="small">恢复商品</el-button>
                        <el-button type="danger" size="small">批量删除</el-button>

                        <div class="d-flex">
                            <el-input v-model="input" placeholder="要搜索的商品名称" style="width: 150px;height:25px"></el-input>
                            <el-button type="info" size="small">搜索</el-button>
                            <el-button size="small">高级搜索</el-button>
                        </div>
                    </div>


                    <div class="tab">
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange" border>
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="data" label="商品" width="250">
                                <template v-slot="scope">
                                    <img :src="scope.row.cover" alt="">
                                    {{ scope.row.category.name }}
                                    {{ scope.row.title }}
                                    {{ scope.row.create_time }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="实际销量" width="50">
                                <template v-slot="scope">
                                    {{ scope.row.min_stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="商品状态" width="80">
                            </el-table-column>
                            <el-table-column prop="address" label="审核状态" width="150">
                            </el-table-column>
                            <el-table-column prop="address" label="总库存" width="120">
                                <template v-slot="scope">
                                    {{ scope.row.stock }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="address" label="价格(元)" width="110">
                                <template v-slot="scope">
                                    {{ scope.row.min_price }}
                                </template>

                            </el-table-column>
                            <el-table-column prop="address" label="操作" width="440">
                            </el-table-column>
                        </el-table>
                    </div>

                </el-tab-pane>
            </el-tabs>
        </el-main>


        <el-footer>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage2" :page-sizes="[10, 20, 30, 40]" :page-size="10"
                    layout="sizes, prev, pager, next" :total="100">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>
</template>



<script>
import { getGoodsList } from '@/common/api'

export default {
    data() {
        return {
            activeName: 'all',
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            input: '',
            token: '',
            tableData: [],
            page: 1,
            limit: 10,
        };

    },
    mounted() {
        this.token = this.$store.state.token
        this.geturl()
    },
    methods: {
        async geturl(tab) {
            let res = await getGoodsList(this.page, this.limit, tab)
            if (res.data.msg == 'ok') {
                this.tableData = res.data.data.list
            }
        },
        handleClick(tab, event) {
            this.geturl(tab.props.name)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },

    }
};


</script>

<style scoped>
.el-header,
.el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 60px;
}


.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    padding: 0;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.el-breadcrumb {
    width: 100%;
    height: 100%;
    line-height: 60px;
    background: rgb(255, 255, 255);
}

.el-main[data-v-01b50c32] {
    line-height: 40px;
    background: rgb(255, 255, 255);
    border-top: 1px solid #ccc;

}

.el-tabs__header {
    padding-left: 20px !important;
}



.d-flex {
    margin-left: auto !important;
}

.el-tabs__content {
    display: flex;
    flex-direction: column;
}

.btn {
    display: flex;
}

.cell img {
    width: 80px;
    height: 80px;
}
</style>